<template>
  <!-- 查看评论 -->
  <div>
    <div class="box-1">
      <div><img src="../assets/发货单图标/订单信息-服务评价.png" alt="" /></div>

      <p>订单信息</p>
    </div>
    <div class="box-2">
      <p class="box-21">商品</p>
      <p class="box-22">{{ cusName }}</p>
      <p class="box-21">发货时间</p>
      <p class="box-22">{{ sendTime }}</p>
      <p class="box-21">到达时间</p>
      <p class="box-22">{{ receiveTime }}</p>
    </div>
    <div class="box-1">
      <div><img src="../assets/发货单图标/订单信息-服务评价.png" alt="" /></div>

      <p>服务评价</p>
    </div>
    <div class="box-5">
      <van-row>
        <van-col span="8">描述相符</van-col>
        <van-col span="12"><van-rate v-model="prodConformityPoint" /></van-col>
        <van-col span="4">{{prodConformityPoint}}分</van-col>
      </van-row>
      <van-row>
        <van-col span="8">物流速度</van-col>
        <van-col span="12"><van-rate v-model="logisticsSpeedPoint" /></van-col>
        <van-col span="4">{{logisticsSpeedPoint}}分</van-col> </van-row
      ><van-row>
        <van-col span="8">服务质量</van-col>
        <van-col span="12"><van-rate v-model="serviceQualityPoint" /></van-col>
        <van-col span="4">{{serviceQualityPoint}}分</van-col>
      </van-row>
    </div>
    <div class="box-1">
      <p>{{comment}}</p>
    </div>
  </div>

  <!-- 
    {serialNo: "1354275437610856449", prodName: "鼠标垫 800mm*300mm", cusName: "北京东大正保科技有限公司", sendTime: "2021-01-27 14:29:19", receiveTime: "2021-01-27 14:36:44", …}
comment: "84864646"
createTime: "2021-02-03 11:15:02"
createUser: "1354275382904549377"
cusName: "北京东大正保科技有限公司"
imgs: (3) ["https://wx3.sinaimg.cn/large/0071noTCgy1gj9m2ov2tuj30g00shn26.jpg", "https://timgsa.baidu.com/timg?image&quality=80&siz…F20201001%2F0cb3874405f745689ff0347d65df37ca.jpeg", "https://wx4.sinaimg.cn/large/0071noTCgy1gj9m2q7kn6j30g00sh7io.jpg"]
logisticsSpeedPoint: 4
prodConformityPoint: 2
prodName: "鼠标垫 800mm*300mm"
receiveTime: "2021-01-27 14:36:44"
sendTime: "2021-01-27 14:29:19"
serialNo: "1354275437610856449"
serviceQualityPoint: 4




imgs	string	true	图片数组
receiveTime	string	true	收货时间/到达时间
sendTime	string	true	发货时间
cusName	string	true	客户名称
serialNo	string	true	订单号
prodName	string	true	商品
prodConformityPoint	number	true	描述相符评分
logisticsSpeedPoint	number	true	物流速度评分
serviceQualityPoint	number	true	服务质量评分
comment	string	true	评价描述
createTime	string	true	评价时间
   -->
</template>

<script>
import { evaluateInfoData } from "../request/api";
export default {
  data() {
    return {
      
      serialNo: this.$route.query.serialNo,
      cusName: "",
      sendTime: "",
      receiveTime: "",
      prodConformityPoint: Number(""),
      logisticsSpeedPoint: Number(""),
      serviceQualityPoint: Number(""),
      comment:''
    };
  },
  created() {
    evaluateInfoData({
      serialNo: this.serialNo,
    }).then((res) => {
      console.log(res);
      if (res.errCode == "0") {
        console.log(res.data);
        let { cusName, sendTime, receiveTime ,prodConformityPoint,logisticsSpeedPoint,serviceQualityPoint,comment} = res.data;
        this.cusName = cusName;
        this.sendTime = sendTime;
        this.receiveTime = receiveTime;
        this.prodConformityPoint=prodConformityPoint
        this.logisticsSpeedPoint=logisticsSpeedPoint
        this.serviceQualityPoint=serviceQualityPoint
        this.comment=comment

      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.box-1 {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #f4fbfe;
  img {
    padding: 10px 20px;
  }
  p {
    flex: 1;
    color: #003497;
  }
}
.box-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: #ccc;
  .box-21 {
    width: 25%;
    text-align: center;
  }
  .box-22 {
    width: 75%;
  }
}
</style>